<#include 'layout/template.ftl'/>
<@htmlHead title=''>
	<!-- page specific plugin styles -->
	<link rel="stylesheet" href="${resources}/assets/css/jquery-ui.css" />
	<link rel="stylesheet" href="${resources}/assets/css/datepicker.css" />
	<link rel="stylesheet" href="${resources}/assets/css/ui.jqgrid.css" />
	<link rel="stylesheet" href="${resources}/assets/css/ui-dialog.css" />
		<link rel="stylesheet" href="${resources}/assets/css/fileinput.min.css" />
	<link rel="stylesheet" href="${resources}/plugins/jqgrid/4.6/jqgrid.extend.css" />
<style>
#grid-table td{
	text-align:center;
}
</style>
</@htmlHead>
<@htmlBody 'vote'  'cooperativeArea'   >
	<#include 'layout/breadcrumbs.ftl'>
	<@breadcrumbs '管理'   '列表'></@breadcrumbs>
	<!-- page-content begin -->
	<div class="page-content">
			<!-- page-header begin -->
			<div class="page-header">
					<h1>
						区域列表
					</h1>
			</div>
			<!-- page-header end -->
			<div class="row">
				<div class="col-md-12">	
					<div id="opt"> 
						<#-- 按钮 -->
						<div style="float:right">
				           <!-- <a href="${path}/manage/vote/cooperativeArea/create" class="btn btn-sm btn-primary">新增</a> -->
					   <!--     <button id="intodata_btn"  class="btn btn-sm btn-primary">
								<i class="ace-icon fa fa-cloud-upload"></i>导入
						   </button>
						   <a  href="${resources}/downtemplate/cooper_area.xlsx" id="down_btn"  class="btn btn-sm btn-primary">
							  <i class="ace-icon fa fa-cloud-download"></i>下载导入模版
						   </a> -->
						</div>
					    <div id="query"> 
				       	  <label>名称：</label><input type="text" class="input-sm" id="name" name="name"  data-op="cn" /> 
						  <button id="find_btn"  class="btn btn-sm btn-primary">
								<i class="ace-icon fa fa-search"></i>查 询
						  </button>
					    </div>
					</div> 
				</div>	
			</div>
			<!-- form begin -->
			<div class="row">	
				<div class="col-md-12">
					<!-- jqGrid begin -->
				  	<table id="grid-table"></table>
			 		<div id="grid-pager"></div>
			 		<!-- jqGrid end -->
				</div>
			</div>	
			<!-- form end -->
	</div>		
	<!-- page-content end -->	
</@htmlBody>
<@htmlBodyScript>
		<script src="${resources}/assets/js/date-time/bootstrap-datepicker.js"></script>
		<script src="${resources}/assets/js/jqGrid/jquery.jqGrid.src.js"></script>
		<script src="${resources}/assets/js/jqGrid/i18n/grid.locale-cn.js"></script>
		<script src="${resources}/assets/js/dialog/dialog-min.js"></script>
	    <script src="${resources}/assets/js/fileinput.min.js"></script>
		<script>
			var $path ='${path}';
			var grid_selector = "#grid-table";
			var pager_selector = "#grid-pager";
			//价格
         	function formatPrice(cellValue, options, rowObject) {
         		return accounting.formatMoney(cellValue, "¥", 2, ",", ".");
    		}
    		//数量
         	function formatNumber(cellValue, options, rowObject) {
         		return accounting.formatNumber(cellValue);
    		}
    		//时间
			function formatDatetime(cellValue, options, rowObject) {
				var output = moment(cellValue).format('YYYY-MM-DD');
				return output;
			}
			//状态
			function formatStatus(cellValue, options, rowObject) {
         		var option = '<div class="ui-status">';
				if(cellValue==1){
					option+= "<span class='label label-sm label-success'>正常</span>";
				}
				else if(cellValue==2){
					option+= "<span class='label label-sm label-danger'>停用</span>";
				}
				option = option +'</div>';      
           		return option;
    		}
			function formatLogo(cellValue, options, rowObject) {
				var option = '<div class="ui-status">';
				option+= '<img style="width:100px;" src="http://localhost:8088/taohuibang-manage/resources/vote/images/'+cellValue+'"/>';
				option = option +'</div>';      
           		return option;
			}
			function formatDatetime(cellValue, options, rowObject) {
				var output = moment(cellValue).format('YYYY-MM-DD');
				return output;
			}	
			$(function(){
				//分页插件开始
				$("#grid-table").jqGrid({
					url: '${path}/manage/vote/cooperativeArea/list',
				 	mtype : "post", 
					datatype: "json",
					//prmNames : {search : "search"},  
					colNames:[	'id','名称','创建时间','操作'],
				 	colModel: [
						{name:'id', width:100},
						{name:'name', width:100},
						/* {name:'picurl', width:100,formatter:formatLogo}, */
						{name:'createtime', width:100,formatter:formatDatetime},
						{
							name:'id', 
							width:150,
							formatter:function(cellvalue, options, rawObject) {
					    		var option = '<div class="ui-op">';
					   /*  		option = option +'<a href="${path}/manage/vote/cooperativeArea/update/'+cellvalue+'">编辑'; 
				                option = option +'</a>'; */
					    		option = option +'<a href="${path}/manage/vote/cooperativeArea/delete/'+cellvalue+'"  onclick=\'return confirm("是否删除?");\'>删除';
				                option = option +'</a>';
				                option = option +'</div>';      
			               		return option;  
							}
						}
					],
					viewrecords: true, 							// 在toolbar显示的当前页数,步长,总数
					autowidth: true,  
              		shrinkToFit: true,  	
					height: "450",
					rowNum: 50,
					rowList:[10,50,100],
					sortname: '',
					sortorder: 'asc',
					pager: "#grid-pager",
					caption: "列表",
					loadComplete : function() {
						var table = this;
						setTimeout(function(){
							styleCheckbox(table);
							updateActionIcons(table);
							updatePagerIcons(table);
							enableTooltips(table);
						}, 0);
					}
					
				});
				//分页插件结束
				
				//------------------------------- 自定义查询开始 -------------------------------
				//自定义查询开始
				$("#find_btn").click(function(){ 
					searchData('${path}/manage/vote/cooperativeArea/list');
			    }); 
				//自定义查询结束
				
			})
		</script>	

<script>
$("#intodata_btn").click(function(){ 
	var d = dialog({
	     modal: true,
			 title: '数据导入提示',
			 content: '您是否下载过数据导入模版，如果没有请先下载导入模版，不然将会导致导入数据失败',
			 okValue: '我已下载过',
		 ok: function () {
		 
		     var intodialog = dialog({
		     title: '开始导入数据',
		     width:400,
		     modal: true,
				 content: '<form id="intodata" action="${path}/manage/vote/cooperativeArea/intoData" method="post" enctype="multipart/form-data">'+
				 '<div>'+
				 '<input type="file" accept="application/msexcel" name="file" id="file" class="file" />'+
				 '</div></form>',
				 okValue: '开始导入',
		     ok: function () {
		    	  var filepath=$("#file").val();
		   		  if(filepath.trim().length==0){
		    		 $(".file-caption-name").html("请选择文件");
		    		 return false;
		   		  }else{
		   	 		$("#intodata").submit();
		   	 	  }	    					   	
		     },
		     cancelValue: '取消',
				 cancel: function () {
				 }
		    });
		    
		    	$("#file").fileinput({
		    		showCaption: true,
			        showPreview: false,
			        showRemove: false,
			        showUpload: false,
			        showCancel: false,
			        showClose: false
		    	});
		    	$('.kv-fileinput-caption').css("height","42px");
		    	$('.input-group-btn .hidden-xs').html("上传");
		     intodialog.show();
		     
			 },
		 cancelValue: '还没有下载',
			 cancel: function () {
			 
			 }
		 });
		 d.show();
		 }); 
</script>
		
		
<script src="${resources}/assets/js/jqGrid/jquery.jqGrid.Extract.js"></script>
</@htmlBodyScript>	


